A sketchy (interactive) Meter chart with background and needle images

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.meter.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" id="cvs" width="237" height="196">
    [No canvas support]
</canvas>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        var meter = new RGraph.Meter({
            id: 'cvs',
            min: 0,
            max: 10,
            value: 5,
            options: {
                centerx: 116,
                centery: 136,
                backgroundColor: 'rgba(0,0,0,0)',
                backgroundImageUrl: '/images/meter-sketch.png',
                backgroundImageStretch: false,
                backgroundImageOffsetx: 5,
                backgroundImageOffsety: 6,
                needleColor: 'rgba(0,0,0,0)',
                needleImageUrl: '/images/meter-sketch-needle.png',
                needleImageOffsetx: -5,
                needleImageOffsety: -5,
                colorsRanges: [],
                tickmarksBigNum: 0,
                tickmarksSmallNum: 0,
                border: false,
                labels: false,
                centerpinStroke: 'rgba(0,0,0,0)',
                centerpinFill: 'rgba(0,0,0,0)',
                anglesStart: 2.7,
                anglesEnd: 6.59
            }
        }).draw();
    
        meter.canvas.onclick = function (e)
        {
            var value = meter.getValue(e);
        
            if (typeof value === 'number') {
                meter.value = value;
                meter.grow();
            }
        }
    };
</script>